<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">

  <title>此消彼长</title>
  <link rel="stylesheet" href="script/jquery-ui.1.10.4.css">  <!-- 注意顺序-->
  <style>
  .col-md-3 {
    text-align: center;
    margin: center;
/*    width: 100px;
    height: 100px;*/
    background: #ccc;
  }
  </style>
  <script src="script/jquery-1.10.min.js"></script>
  <script src="script/jquery-ui.1.10.4.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row">
      <div class="col-md-3">
          <!-- <table class="table" id = "left_table">
            <thead>
              <th></th>
              <th>username</th>
              <th>years</th>
              <th>address</th>
            </thead>
            <tbody>
              <tr><td><input type="checkbox" name=""></td><td>a</td><td>b</td><td>c</td></tr>
              <tr><td><input type="checkbox" name=""></td><td>d</td><td>b</td><td>c</td></tr>
              <tr><td><input type="checkbox" name=""></td><td>e</td><td>b</td><td>c</td></tr>
            </tbody>
          </table> -->
          <select class="select" id="left_select">
            <option>aaaa</option>
            <option>bbbb</option>
            <option>cccc</option>

          </select>
      </div>
      <div class="col-md-3">
              <button class="btn btn-info" id="right_btn"> > </button><br>
              <button class="btn btn-danger" id="left_btn"> &lt </button><br>
              <button class="btn btn-default" id ="all_btn"> 全移 </button><br>
      </div>
      <div class="col-md-3">
<!--             <table class="table" id="right_table">
            <thead>
              <th></th>
              <th>username</th>
              <th>years</th>
              <th>address</th>
            </thead>
            <tbody>

            </tbody>
          </table> -->
          <select class="select" id="right_select">


          </select>
      </div>
  </div>



</div>
<script type="text/javascript">

$(document).ready(function(){
  $("#right_btn").click(function(){
    dom_obj = $("#left_select :selected")  //直接选中 元素对象 ，不用提取数值，可以此消
    $("#right_select").append(dom_obj) //append 彼长
  })

  $("#left_btn").on("click",function(){

    dom_obj = $("#right_select :selected")  //直接选中 元素对象 ，不用提取数值，可以此消
    $("#left_select").append(dom_obj) //append 彼长

  })

  $("#all_btn").on("click",function(){
    // console.log($("#left_select"))
    dom_obj = $("#left_select option")  //直接选中 元素对象 ，不用提取数值，可以此消
    dom_obj.each(function(index, el) {

          $("#right_select").append(el) //append 彼长
    });


  })


});
</script>


 
</body>
</html>